<template>
	<view class="wanl-feedback">
		<view class="edgeInsetTop"></view>
		<view class="feedback-title">
			<view>问题和意见</view>
			<view class="feedback-quick text-red" @tap="chooseMsg">
				<text class="margin-right-xs">快速键入</text>
				<text class="wlIcon-fanhui4"></text>
			</view>
		</view>
		<view class="cu-form-group">
			<textarea maxlength="-1" v-model="sendDate.content" placeholder-class="placeholder"
				placeholder="请详细描述你的问题和意见..."></textarea>
		</view>
		<view class="feedback-title">
			<text>问题截图</text>
		</view>
		<view class="cu-bar bg-white">
			<view class="action">
				点击预览图片
			</view>
			<view class="action">
				{{sendDate.images.length}}/8
			</view>
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(image,index) in sendDate.images" :key="index">
					<image :src="image" @tap="previewImage(sendDate.images, index)" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="close(index)">
						<text class='wlIcon-shanchu2'></text>
					</view>
				</view>
				<view class="solids" @tap="chooseImg" v-if="sendDate.images.length<8">
					<text class="wlIcon-31paishe"></text>
				</view>
			</view>
		</view>
		<view class='feedback-title'>
			<text>微信/手机号</text>
		</view>
		<view class="cu-form-group">
			<input placeholder="选填方便我们联系你" placeholder-class="placeholder" v-model="sendDate.contact"></input>
		</view>
		<view class='feedback-title feedback-star-view'>
			<text>应用评分</text>
			<view class="feedback-star-view">
				<wanl-rate :quantity="5" :size="24" normal="#dadada" :current="sendDate.score" @change="chooseStar" />
			</view>
		</view>
		<view class="wanlian cu-bar tabbar foot flex flex-direction">
			<button class="cu-btn wanl-bg-redorange lg" @tap="send">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msgContents: ["界面显示错乱", "启动缓慢，卡出翔了", "UI无法直视，丑哭了", "偶发性崩溃"],
				sendDate: {
					score: 0,
					content: "",
					images: [],
					contact: ""
				}
			}
		},
		onLoad() {
			// 获取系统信息
			let sysinfo = uni.getSystemInfoSync();
			this.sendDate = Object.assign({
				device: {
					language: sysinfo.language,
					brand: sysinfo.brand,
					model: sysinfo.model,
					system: sysinfo.system,
					// #ifdef MP-ALIPAY
					platform: '支付宝小程序',
					// #endif
					// #ifdef MP-BAIDU
					platform: '百度小程序',
					// #endif
					// #ifdef MP-QQ
					platform: 'QQ小程序',
					// #endif
					// #ifdef MP-TOUTIAO
					platform: '头条小程序',
					// #endif
					// #ifdef MP-WEIXIN
					platform: '微信小程序',
					// #endif
					// #ifdef H5
					platform: 'H5',
					// #endif
					// #ifdef APP-PLUS
					platform: sysinfo.platform,
					startupTime: plus.runtime.startupTime, //获取当前应用的启动时间戳
					launchLoadedTime: plus.runtime.launchLoadedTime, //获取当前应用首页加载的时间
					uniVersion: plus.runtime.uniVersion, //客户端uni-app运行环境的版本号
					innerVersion: plus.runtime.innerVersion, //客户端5+运行环境的内部版本号
					versionCode: plus.runtime.versionCode, //客户端的版本号
					version: plus.runtime.version, //客户端的版本名称
					origin: plus.runtime.origin //应用安装来源
					// #endif
				}
			}, this.sendDate);
		},
		methods: {
			chooseMsg() { //快速输入
				uni.showActionSheet({
					itemList: this.msgContents,
					success: (res) => {
						this.sendDate.content = this.msgContents[res.tapIndex];
					}
				})
			},
			chooseStar(e) { //点击评星
				this.sendDate.score = e.index;
			},
			chooseImg() { //选择图片


				uni.showModal({
					title: '托普装修基材对存储空间/照片权限申请说明',
					content: '为了提供图片上传的功能，我们需要申请相机/存储权限。',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#f55850',
					cancelColor: '#39B54A',
					success: (res) => {
						if (res.confirm) {
							console.log('comfirm') //点击确定之后执行的代码
							uni.chooseImage({
								sourceType: ["camera", "album"],
								sizeType: "compressed",
								count: 8 - this.sendDate.images.length,
								success: res => {

									for (let i = 0; i < res.tempFilePaths.length; i++) {
										// 读取图片宽高
										uni.getImageInfo({
											src: res.tempFilePaths[i],
											success: image => {
												uni.uploadFile({
													url: 'https://zm.zonmay.com/api/UpFiles/uploadimg',
													filePath: image.path,
													name: 'file',
													formData: null,
													success: res => {
														// console.log(JSON.parse(res.data))
														this.sendDate
															.images.push(
																JSON.parse(
																	res
																	.data)
																.data.url);
													},
													fail: error => {
														this.$wanlshop.msg(
															JSON.parse(
																error
																.data)
															.msg);
													}
												});
											}
										});
									}
								}
							})
						} else {
							console.log('cancel') //点击取消之后执行的代码
						}
					}
				})



			},


			close(e) {
				this.sendDate.images.splice(e, 1);
			},
			previewImage(image, index) {
				var imgArr = [];
				for (var item of image) {
					imgArr = imgArr.concat(this.$wanlshop.oss(item, 500));
				}
				uni.previewImage({
					urls: imgArr,
					current: imgArr[index],
					indicator: 'number'
				});
			},
			async send() { //发送反馈
				this.sendDate.token = uni.getStorageSync("wanlshop:user").token
				await uni.request({
					url: '/api/Suggest/submitSuggestion',
					method: 'POST',
					data: this.sendDate,
					success: res => {
						this.$wanlshop.to('/pages/page/success?type=feedback');
					}
				});
			}
		}
	}
</script>

<style>
	/*问题反馈*/
	.feedback-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 25rpx;
		color: #666;
	}

	.feedback-star-view.feedback-title {
		justify-content: flex-start;
		margin: 0;
	}

	.feedback-quick {
		position: relative;
	}

	.feedback-star-view {
		margin-left: 20upx;
	}

	.cu-bar .action:first-child {
		font-size: 26rpx;
	}

	.solids::after {
		border: 2px dashed #c5c5c5;
	}

	.wanlian.cu-bar.tabbar {
		background-color: transparent;
	}

	.wanlian.cu-bar.tabbar .cu-btn {
		width: calc(100% - 50rpx);
	}

	.wanlian.cu-bar.tabbar .cu-btn.lg {
		font-size: 32rpx;
		height: 86rpx;
	}
</style>